<template>
	<!-- <transition @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
		<n-layout-sider
			v-if="layoutStore.sidebar"
			class="bg-bg-1 h-full"
			:width="320"
			collapse-mode="width"
			:collapsed-width="0"
			:collapsed="!layoutStore.sidebar">
			<sports-betslip v-show="layoutStore.sidebar === 'betslip'"></sports-betslip>
			<activity-vue v-show="layoutStore.sidebar === 'activity'"></activity-vue>
		</n-layout-sider>
	</transition> -->
	<transition @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
		<div v-if="layoutStore.sidebar" class="w-[370px] box-content bg-bg-9">
			<betslip-vue v-show="layoutStore.sidebar === 'betslip'"></betslip-vue>
			<activity-vue v-show="layoutStore.sidebar === 'activity'"></activity-vue>
		</div>
	</transition>
</template>

<script lang="ts" setup>
// import { NLayoutSider } from 'naive-ui'
import BetslipVue from '@/views/betslip/index.vue'
import ActivityVue from '@/views/activity/activity/index.vue'
import { useLayoutStore } from '@/store'
import gsap from 'gsap'

const layoutStore = useLayoutStore()

const onBeforeEnter = (el: any) => {
	gsap.set(el, {
		width: 0,
		opacity: 0
	})
}

const onEnter = (el: any, done: any) => {
	gsap.to(el, {
		width: '370px',
		opacity: 1,
		duration: 0.3,
		onComplete: done
	})
}

const onLeave = (el: any, done: any) => {
	gsap.to(el, {
		width: 0,
		opacity: 0,
		duration: 0.3,
		onComplete: done
	})
}
</script>
